<!DOCTYPE html>
<!-- saved from url=(0039)http://www.atoolbox.net/Tool.php?Id=744 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="keywords" content="番茄时钟网页版, 在线番茄时钟, 番茄时钟工具, 番茄工作法, 在线番茄时钟工具">
		<meta name="description" content="在线番茄时钟工具">
   
    <link rel="apple-touch-icon" sizes="76x76" href="http://www.atoolbox.net/UploadFiles/20190208/KUA201902081706300.png">
    <link rel="apple-touch-icon" sizes="120x120" href="http://www.atoolbox.net/UploadFiles/20190208/KUA201902081706300.png">
    <link rel="apple-touch-icon" sizes="152x152" href="http://www.atoolbox.net/UploadFiles/20190208/KUA201902081706300.png">
    <link rel="apple-touch-icon" sizes="180x180" href="http://www.atoolbox.net/UploadFiles/20190208/KUA201902081706300.png">
    <link rel="apple-touch-icon" sizes="58x58" href="http://www.atoolbox.net/UploadFiles/20190208/KUA201902081706300.png">

    <title>番茄时钟 - 一个工具箱 - 好用的在线工具都在这里！</title>

    <!-- Bootstrap core CSS -->
    <link href="clock/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="clock/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="clock/index.css" rel="stylesheet">
    <link href="clock/ad.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script src="clock/hm.js.a"></script><script src="clock/holder.min.js.a"></script><style type="text/css" abt="234"></style>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="clock/ie10-viewport-bug-workaround.js.a"></script>

    <script src="clock/jquery-3.3.1.min.js.a"></script>
    <script src="clock/bootstrap.min.js.a"></script>
    <script src="clock/hotkeys.min.js.a"></script>
    <script async="" src="clock/f.txt" crossorigin="anonymous"></script>
    <style type="text/css">#_copy{align-items:center;background:#4494d5;border-radius:3px;color:#fff;cursor:pointer;display:flex;font-size:13px;height:30px;justify-content:center;position:absolute;width:60px;z-index:1000}#select-tooltip,#sfModal,.modal-backdrop,div[id^=reader-helper]{display:none!important}.modal-open{overflow:auto!important}._sf_adjust_body{padding-right:0!important}.super_copy_btns_div{position:fixed;width:154px;left:10px;top:45%;background:#e7f1ff;border:2px solid #4595d5;font-weight:600;border-radius:2px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;z-index:5000}.super_copy_btns_logo{width:100%;background:#4595d5;text-align:center;font-size:12px;color:#e7f1ff;line-height:30px;height:30px}.super_copy_btns_btn{display:block;width:128px;height:28px;background:#7f5711;border-radius:4px;color:#fff;font-size:12px;border:0;outline:0;margin:8px auto;font-weight:700;cursor:pointer;opacity:.9}.super_copy_btns_btn:hover{opacity:.8}.super_copy_btns_btn:active{opacity:1}</style><input type="hidden" id="_w_simile" data-inspect-config="3"><script type="text/javascript" src="chrome-extension://odphnbhiddhdpoccbialllejaajemdio/scripts/inspector.js"></script><script>//remove baidu search ad
var _countAA = 0
function doBBBd(){}
doBBBd()
document.addEventListener('keyup', function(){_countAA-=10;doBBBd()}, false)
document.addEventListener('click', function(){_countAA-=10;doBBBd()}, false)

</script></head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <div id="bg">
        <div id="main-body" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header" style="color: #000000;">番茄时钟</h1>
                    <div class="row margin-b-18">
            <div class="col-xs-12 col-sm-12">
              <div class="panel panel-default" style="margin-bottom: 0px; border: 0px solid transparent; border-radius: 4px; background-color: #f5f5f5;">
                <div class="panel-body" style="padding: 0; color: #000000;" >
                    <script async="" src="clock/f.txt" crossorigin="anonymous"></script>
                    <!-- 工具页上 -->
                    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1979015608814436" data-ad-slot="2048734179" data-ad-format="horizontal" data-full-width-responsive="false"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
              </div>
            </div>
          </div>
        </div>
                    <!--Start-->
          


    <link rel="stylesheet" type="text/css" href="clock/font-awesome.min.css">
    <link href="clock/css" rel="stylesheet">
	<style>
 #bg{background-image: url(img/1.jpg);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;

    }
#pomodoro-body{
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}
#pomodoro-body h1{
    text-align: center;
    margin-top: 5%;
    color: #fff;
    font-family: 'Sedgwick Ave Display', cursive;
}

#pomodoro-body .main{
    margin-top: 5%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 70%;
    text-align: center;
}

#pomodoro-body .control{
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
}

#pomodoro-body .break{
    display: inline;
    padding: 0 30px; 
}

#pomodoro-body .length{
    display: inline;
    padding: 0 30px;
}
#pomodoro-body span{
    font-size: 2em;
    color: #fff;
    font-family: 'Bitter', serif;
}
#pomodoro-body .fa{
    font-size: 1.4em;
    color: #fff;
    cursor: pointer;
    margin: 0 10px;
}

#pomodoro-body .control p{
    color: #b5caa0;
}

#pomodoro-body .clock{
    /*width: 300px;
    height: 300px;*/
	width: 80%;
    height: 0;
    padding-bottom: 80%;
    border-radius: 50%;
    border:4px solid #a8d8b9;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
    cursor: pointer;
    z-index: 20;
    overflow: hidden;
}

#pomodoro-body .clock:before{
    content: '';
    position: absolute;
    border:4px solid #cb4042;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#pomodoro-body .clock h2{
    font-family: 'Bitter', serif;
    font-size: 3.5em;
    /* margin-top: 80px; */
    color: #fff;
}

#pomodoro-body .clock #show-title{
    margin-top: 34%;
}

#pomodoro-body .clock #show-time{
    margin-top: 5%;
}

#pomodoro-body .tip {
    margin-top: 6%;
    margin-bottom: 6%;
    text-align: center;
    position: relative;
}

#pomodoro-body .tip p {
    border-radius: 1.4em;
    border: 1px solid #fff;
    color: #fff;
}

#pomodoro-body #per{
    margin: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background-color: #b5caa0; 
    /* background-color: #3f2b36; */
    z-index: -1;
}
	</style>


    <div id="pomodoro-body">
            <div class="row margintb-6">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3">
    <!-- <h1>Yinyou PomodoroClock</h1> -->

    <div class="main">
        <div class="control">
            <div class="break">
            <!-- <p>BREAK LENGTH</p> -->
            <p>休息时长</p>
                <i class="fa fa-minus-square-o" aria-hidden="true" id="break-minus"></i>
                <span id="break-length">5</span>
                <i class="fa fa-plus-square-o" aria-hidden="true" id="break-plus"></i>
            </div>
            <div class="length">
            <!-- <p>SESSION LENGTH</p> -->
            <p>番茄时长</p>
                <i class="fa fa-minus-square-o" aria-hidden="true" id="session-minus"></i>
                <span id="session-length">25</span>
                <i class="fa fa-plus-square-o" aria-hidden="true" id="session-plus"></i>
            </div>
        </div>
        <div class="clock">
            <h2 id="show-title">Session</h2>
            <h2 id="show-time">24:49</h2>
            <span id="per" style="background-color: rgb(181, 202, 160); height: 0.733333%;"></span>
        </div>
        <div class="tip">
            <p class="btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="点击表盘也可以开始/暂停">开始/暂停</p>

        </div>
<div>
    <img src="img/3.gif" width="80%" height="80%">
</div>
    </div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
    var session = 25;       //这个是默认工作时间，用在设置那儿显示的，这里以分钟为单位，且超过60也是分钟
    var breaklength = 5;            //设置break时长——休息时长,细节同session
    var flag = 1;           //设置工作状态，1是工作的暂停，2是正在休息的暂停，3是在工作中，4是休息中
    var sec = session*60;   //用来记录变化中的时间，单位为秒
    var percent = 0;    //记录背景颜色显示的高度，0-100，是百分比

    $("#break-minus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态，点击无效
        }
        breaklength--;
        if(breaklength < 1){
            breaklength = 1;
        }
        $("#break-length").html(breaklength);
        if(flag === 2){
            //如果是休息的暂停，一旦改了，就又对sec产生了修改
            sec = breaklength*60;
        }
        showHMS(breaklength,2);
    });
    $("#break-plus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态，点击无效
        }
        breaklength++;
        $("#break-length").html(breaklength);
        if(flag === 2){
            //如果是休息的暂停，一旦改了，就又对sec产生了修改
            sec = breaklength*60;
        }
        showHMS(breaklength,2);
    });
    $("#session-minus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态，点击无效
        }
        session--;
        if(session < 1){
            session = 1;
        }
        $("#session-length").html(session);
        if(flag === 1){
            //如果是工作的暂停，一旦改了，就又对sec产生了修改
            sec = session*60;
        }
        showHMS(session,1);
    });
    $("#session-plus").on("click",function(){
        if(flag !== 1 && flag !== 2){
            return;         //如果非暂停状态，点击无效
        }
        session++;
        $("#session-length").html(session);
        if(flag === 1){
            //如果是工作的暂停，一旦改了，就又对sec产生了修改
            sec = session*60;
        }
        showHMS(session,1);
    });

    //在时钟上显示时分秒，传两个参数，一个是分钟，一个是状态。
    //如果在工作的暂停中，修改休息的时长，不改变时钟上的显示，state有两个取值，取1时表示修改工作时长，取2表示修改休息时长
    var showHMS = function(min,state){
        if(state  !== flag){
            return;         //如果不是在对应的暂停状态，就不改变时钟上显示的值
        }
        var show = "";
        if(min >= 60){
            show += parseInt(min/60)+":";
            min = min%60;
        }
        if(min<10){
            show+="0";
        }
        show+=min+":00";
        $("#show-time").html(show);
    };




    //开始后时间的变化,参数是剩下的秒数
    function timeChange(){
        var temp = sec;
        if(flag === 1 || flag === 2){
            //如果是暂停中，就不变时间
            return;
        }
        if(sec === 0){
            if(flag === 3){
                flag = 4;
                sec = breaklength*60;
                $("#show-title").html("Break");
            }else{
                flag = 3;
                sec = session*60;
                $("#show-title").html("Session");
            }

        }

        var showHMS = "";
        if(temp>=3600){
            showHMS+=parseInt(second/360)+":";
            temp = temp%360;
        }
        if(temp<70){
            showHMS+="0";
        }
        showHMS+=parseInt(temp/60)+":";
        temp = temp%60;
        if(temp<10){
            showHMS+="0";
        }
        showHMS+=temp;


        //console.log(showHMS);
        $("#show-time").html(showHMS);
        if(flag === 3){
            //工作中
            $("#per").css('background-color','#b5caa0');
            if(sec === 0){
                percent = 100;
            }else{
                percent = (session*60-sec)/session/60*100;
            }
            $("#per").css('height',percent+'%');
        }
        if(flag === 4){
            //休息中
            $("#per").css('background-color',"#3f2b36");
            if(sec === 0){
                percent = 100;
            }else{
                percent = (breaklength*60-sec)/breaklength/60*100;
            }
            $("#per").css('height',percent+'%');
        }
        sec--;
        setTimeout(timeChange,1000);
    };



    //时钟点击事件——开始与暂停的转换，及开始后时间的变化
    $(".clock").on("click",function(){
        if(flag === 1){
            flag = 3;
        }else if(flag === 3){
            flag = 1;
        }else if(flag === 2){
            flag = 4;
        }else if(flag === 4){
            flag = 2;
        }

        //console.log(sec);
        timeChange();
    });

    $(".tip").on("click",function(){
        if(flag === 1){
            flag = 3;
        }else if(flag === 3){
            flag = 1;
        }else if(flag === 2){
            flag = 4;
        }else if(flag === 4){
            flag = 2;
        }

        //console.log(sec);
        timeChange();
    });


});
</script>


          
          <div id="row-alert" class="row margin-t-18" style="display: none;">
            <div class="col-xs-12 col-sm-12">
              <div class="alert alert-warning alert-dismissible fade in" role="alert" style="margin-bottom: 0px;">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
                <span id="alert-message">...</span>
              </div>
            </div>
          </div>
          
                    
                    <div class="row margin-t-18">
            <div class="col-xs-12 col-sm-12">
              <div class="panel panel-default" style="margin-bottom: 0px; border: 0px solid transparent; border-radius: 4px; background-color: #f5f5f5;">
                <div class="panel-body" style="padding: 0;">
                  <script async="" src="clock/f.txt" crossorigin="anonymous"></script>
                  <!-- 工具页 -->
                  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1979015608814436" data-ad-slot="5557529889" data-ad-format="auto" data-full-width-responsive="false"></ins>
                  <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                  </script>
                </div>
              </div>
            </div>
          </div>
          
                              <div class="row margin-t-18">
            <div class="col-xs-12 col-sm-12">
              <div class="panel panel-default" style="margin-bottom: 0px;">
                <div class="panel-body">
                  <p>番茄工作法是简单易行的时间管理方法，使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在纸上画一个X短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。番茄工作法极大地提高了工作的效率，还会有意想不到的成就感。</p><p><br></p><p><strong>原则</strong></p><p>1）一个番茄时间（25分钟）不可分割，不存在半个或一个半番茄时间。</p><p>2） 一个番茄时间内如果做与任务无关的事情，则该番茄时间作废。</p><p>3）永远不要在非工作时间内使用"番茄工作法"。（例如：用3个番茄时间陪儿子下的棋、用5个番茄时间钓鱼，等等。）</p><p>4）不要拿自己的番茄数据与他人的番茄数据比较。</p><p>5）番茄的数量不可能决定任务最终的成败。</p><p>6）必须有一份适合自己的作息时间表。</p><p><br></p><p><strong>做法</strong></p><p>1、每天开始的时候规划今天要完成的几项任务，将任务逐项写在列表里（或记在软件的清单里）</p><p>2、设定你的番茄钟（定时器、软件、闹钟等），时间是25分钟。</p><p>3、开始完成第一项任务，直到番茄钟响铃或提醒（25分钟到）。</p><p>4、停止工作，并在列表里该项任务后画个X。</p><p>5、休息3~5分钟，活动、喝水、方便等等。</p><p>6、开始下一个番茄钟，继续该任务。一直循环下去，直到完成该任务，并在列表里将该任务划掉。</p><p>7、每四个番茄钟后，休息25分钟。</p><p>在某个番茄钟的过程里，如果突然想起要做什么事情——</p><p>a.非得马上做不可的话，停止这个番茄钟并宣告它作废（哪怕还剩5分钟就结束了），去完成这件事情，之后再重新开始同一个番茄钟；</p><p>b.不是必须马上去做的话，在列表里该项任务后面标记一个逗号（表示打扰），并将这件事记在另一个列表里（比如叫“计划外事件”），然后接着完成这个番茄钟。</p><p><br></p><p><strong>优点</strong></p><p>番茄工作法是一套简单的工具和流程，其优点如下：</p><p>1、减轻时间焦虑</p><p>2、提升集中力和注意力，减少中断</p><p>3、增强决策意识</p><p>4、唤醒激励和持久激励</p><p>5、巩固达成目标的决心</p><p>6、完善预估流程，精确地保质保量</p><p>7、改进工作学习流程</p><p>8、强化决断力，快刀斩乱麻 </p><p><br></p>
                </div>
              </div>
            </div>
          </div>
                    
         
            <p class="text-center text-muted">
              版权所有 © 尝鲨人
            </p>
          </footer>
        </div>
      </div>
    </div>
    <!--全局遮罩层开始-->
    <div class="layer"></div>
    <div id="globalAd">
      <span onclick="CloseGlobalAd();" class="closeIco"></span>
      <a target="_blank" class="globalContent">
        <div id="a-mmredbox-cover" class="mmredbox_cover">  
          <img src="clock/saved_resource" id="a-mmredbox-cover-img" class="mmredbox_cover_img">  
        </div>
      </a>
    </div>
    <!--全局遮罩层结束-->
    <script src="clock/geopattern.min.js.a"></script>
    <script src="clock/jr-qrcode.js.a"></script>
    <script src="clock/clipboard.min.js.a"></script>
    <script src="clock/bootstrap-notify.min.js.a"></script>
    <script src="clock/jquery.function.js.a"></script>
    <script src="clock/jquery.ad-1.0.0.js.a"></script>
    <script src="clock/jquery.search.js.a"></script>
    <script src="clock/baidu.tongji.js.a"></script>
    <script type="text/javascript">
      // 随机背景
      $("#app-coupon-search").geopattern(Math.random().toString());

      // 页面二维码
      $('#qr-link').popover({
          trigger : 'hover',
          html: true,
          content: '      <div id="qrPanel" class="panel panel-default">'+
                  '          <div class="panel-body">'+
                  '            <div id="qr">'+
                  '              <img>'+
                  '            </div>'+
                  '          </div>'+
                  '      </div>'
      }).on('inserted.bs.popover', function () {
        var data = jrQrcode.getQrBase64(window.location.href, {
          padding       : 0,
          width         : 150,
          height        : 150,
          correctLevel  : 2,
        });
        $('#qr img').attr('src',data); 
        $('#qr img').addClass("img-responsive");
      })

      // 复制链接
      $('#btn-link').click(function() {
        link();
      });

      function link() {
        var clipboard = new ClipboardJS('#btn-link')
        clipboard.on('success', e => {
          $("#alert-message").text('链接已复制到剪贴板');
          $("#row-alert").show();
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          $("#alert-message").text('该浏览器不支持自动复制');
          $("#row-alert").show();
          clipboard.destroy()
        })
      }

      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
        HtmlBind_Search();
        Bind_Tongji();
      });
    </script>
	

</body></html>